<template>
  <el-container>
    <my-theme-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>任务结束</span>
        </div>
        <el-collapse v-model="activeName">
          <el-collapse-item name="1">
            <template slot="title">
              任务信息&emsp;<i class="header-icon el-icon-info" />
            </template>
            <table style="text-align: left;width:100%;">
              <tr style="background-color: #f4f5f4;">
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">任务名称</td><td>&emsp;{{ message.tskname }}</td>
              </tr>
              <tr>
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">流程名称</td><td>&emsp;{{ message.procname }}</td>
              </tr>
              <tr style="background-color: #f4f5f4;">
                <td style="padding:10px;width:180px;font-weight:100;color:#1890ff;">当前节点</td><td>&emsp;{{ node.nodename }}</td>
              </tr>
            </table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-row style="text-align: center;margin-top:20px;">
        <template>
          <el-button @click="cancel">返回</el-button>
          <el-button type="primary" @click="submitTask">提交</el-button>
        </template>
      </el-row>
    </my-theme-card>
  </el-container>
</template>
<script>
import request from '@/utils/request'
import MyThemeCard from '../../../../components/MyThemeCard/index'
export default {
  components: { MyThemeCard },
  props: { message: Object, taskRemark: Object },
  data: function() {
    return {
      activeName: ['1'],
      // 当前任务节点信息
      node: {},
      // radio选择的下一节点号
      radio_nodesn: {},
      // 选择的下一节点
      selected_next_node: {},
      // 待选的下一节点
      next_nodes: [],
      // 待选的下一节点处理人
      next_users: [],
      // radio选择的处理人
      radio_next_uid: '',
      // 选择的提交人
      selected_next_user: []
    }
  },
  created() {
    this.queryNodeByTask()
  },
  methods: {
    // 查询该任务当前节点
    queryNodeByTask: function() {
      request({
        url: '/task/node/queryNodeByTask',
        method: 'post',
        data: this.message
      }).then(res => {
        if (res.result) {
          this.node = res.data || {}
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    }, // 提交任务
    submitTask: function() {
      // 将选择的人员覆盖节点中的可选人员
      request({
        url: '/task/tasklist/submitTask',
        method: 'post',
        data: {
          'taskRemark': this.taskRemark,
          'task': this.message,
          'nextNodes': []
        }
      }).then(res => {
        if (res.result) {
          this.$message.success('任务提交成功')
          this.toTaskList()
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => {
      })
    },
    cancel: function() {
      this.$emit('toChangePage', 'list', this.message)
    },
    // 转到详细任务信息
    toTaskList: function() {
      this.$router.push({ name: '我的任务' })
    }
  }
}
</script>
